<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'

  export default {
    name: 'WangEditor',
    props: {
      value: {
        type: String,
        default: '',
      },
    },
    data() {
      return {}
    },
    watch: {
      value: function (value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }
      },
    },
    mounted() {
      this.initEditor()
      this.editor.txt.html(this.value)
    },
    methods: {
      initEditor() {
        this.editor = new E(this.$refs.editor)
        this.editor.config.height = 500

        this.editor.config.onchange = (html) => {
          this.info = html // 绑定当前逐渐地值
          this.$emit('change', this.info) // 将内容同步到父组件中
        }

        this.editor.create()
      },
      clearHTML() {
        this.editor.txt.html('')
      },
    },
  }
</script>

<style scoped></style>
